<template>
  <view class="boy">
    <u-swiper
      :list="list3"
      indicator
      indicatorMode="line"
      :circular="true"
	  height='200'
    ></u-swiper>
    <view class="boy_but">
      <view
        class="boy_but_box"
        v-for="(item, index) in cityDataList"
        :key="index"
        @click="search(item)"
      >
        <view class="boy_but_box_img">
          <img :src="item.img" alt="" />
        </view>
        <view class="boy_but_box_text">
          <view>{{ item.title }}</view>
		  <view>兑换规则：{{ item.consu }}</view>
          <view>有效日期：{{ item.time }}</view>
          <view>价格：{{ item.price }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const cityData = require("./home.json");
export default {
  data() {
    return {
      list3: [
        "https://xinghaimuye.com/qnz/img/1.jpg",
        "https://xinghaimuye.com/qnz/img/2.jpg",
        "https://xinghaimuye.com/qnz/img/3.jpg",
        "https://xinghaimuye.com/qnz/img/4.jpg",
      ],
      cityDataList: cityData,
    };
  },
  methods: {
    /** 搜索*/
    search(e) {
      uni.navigateTo({
        url:
          `../../packageA/details/details?info=` +
          encodeURIComponent(JSON.stringify(e)),
      });
    },
  },
};
</script>

<style lang="scss">
// .bg-img {
//   position: fixed;
//   width: 100%;
//   height: 100%;
//   top: 0;
//   left: 0;
//   z-index: -1;
// }
.boy {
  &_title {
    margin: 14rpx;
    display: flex;

    &_serCls {
      width: 132rpx;
      line-height: 74rpx;
      text-align: center;
    }
  }

  &_but {
    &_box {
      display: flex;
      margin: 30rpx;
      padding: 9px;
      background: #f7f7f7;
      border-radius: 12px;

      &_img {
        width: 182px;
        height: 102px;
        margin: 11px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 7px;
          object-fit: cover;
        }
      }

      &_text {
        width: 220px;
        line-height: 30px;
        // margin: 10px 0;
      }
    }
  }
}
</style>